<template>
  <main>
      <div class="logo">
        <i class="iconfont icon-gongzhonghao"></i>
      </div>
      <p class="title-tip">微信授权成功，请绑定手机号</p>
      <van-field
        class="login-input"
        v-model="phone"
        placeholder="请输入手机号码"
        maxlength="11"
        clearable
      />
      <van-field
        class="login-input"
        v-model="captcha"
        type="digit"
        maxlength="4"
        center
        clearable
        placeholder="请输入短信验证码"
      >
        <template #button>
          <span class="send-sms disabled" v-if="isSend">{{ count + '秒后重新发送' }}</span>
          <span class="send-sms" v-else-if="smsLoading">发送中...</span>
          <span class="send-sms" @click="sendSms" v-else>发送短信</span>
        </template>
      </van-field>
      <van-button class="default-btn" block round @click="bindPhone">
        确定绑定
      </van-button>
  </main>
</template>

<script>
import { sha256 } from 'utils/crypto'
import { getUrl } from 'utils/index'
import { Dialog, Toast } from 'vant';
import {mapGetters, mapActions} from 'vuex'
import * as Api from 'api'

export default {
  name: 'home-view',
  data() {
    return {
      phone: '',
      captcha: '',
      timer: '',
      count: 60,
      smsLoading: false,
      countText: '发送短信',
      isSend: false,
    };
  },
  computed: {
    ...mapGetters([
      'user'
    ])
  },
  created() {
    this.$emit('showTabMenu', false);
    // 已绑定手机号，跳转个人中心
    if (this.user.phone) {
      this.$router.push({name: 'Personal'})
    }
  },
  methods: {
    ...mapActions([
      'Token',
      'GetUserInfo',
      'Set_activated'
    ]),
    // 发送短信
    sendSms() {
      if (this.phone.length<11) {
        Toast('请输入正确的手机号！')
        return
      }
      this.smsLoading = true
      Api.SendSms({phone: this.phone}).then(res => {
        Toast(res.message)
        this.isSend = true
        this.smsLoading = false
        this.intervalCount()
      }).catch(() => {
        this.smsLoading = false
      })
    },
    // 倒计时
    intervalCount() {
      this.count = 60
      this.timer = setInterval(() => {
        this.count --
        if (this.count <= 0) {
          this.isSend = false
          clearInterval(this.timer)
        }
      }, 1000)
    },
    // 绑定手机号
    bindPhone() {
      if (this.phone.length < 11) {
        Toast('请输入正确的手机号!')
        return
      }
      if (this.captcha.length < 4) {
        Toast('请输入正确的验证码！')
        return
      }
      let params = {
        captcha: this.captcha,
        phone: this.phone,
        openid: this.user.openid
      }
      Api.BindPhone(params).then(res => {
        Toast('绑定手机号成功！')
        this.Token(res.data)
        this.GetUserInfo()
        setTimeout(() => {
          this.$router.push({name: 'Personal'})
        }, 2000)
      }).catch(() => {

      })
    }
  },
  destroyed() {
    clearInterval(this.timer)
  }
}
</script>

<style lang="less" scoped>
main{
  padding: 0 20px;
}
.title-tip{
  text-align: center;
  font-size: 14px;
  padding-bottom: 40px;
}
.logo{
  margin: 40px auto 20px;
  text-align: center;
  i{
    font-size: 40px;
    color: #fff;
    border-radius: 50%;
    padding: 5px;
    background: #4CAF50;
  }
}
.login-input{
  background: #f5f5f5;
  border-radius: 100px;
  padding: 12px 25px;
  margin-bottom: 12px;
}
.type-link{
  font-size: 14px;
  padding-bottom: 40px;
  display: flex;
  justify-content: space-between;
  color: #FF5722;
  a{
    color: #FF5722;
  }
}
.send-sms{
  color: #FF5722;
  &.disabled{
    color: #bbb;
  }
}
.default-btn{
  margin-top: 40px;
}
</style>
